<template>
	<div
		class="fixed top-0 w-full h-15 bg-gradient-header text-white shadow flex justify-between items-center has-space z-10">
		<app-logo />
		<div class="absolute left-[50%] -translate-x-[50%]">
			<app-wallet v-if="accountStore.isLogin" />
		</div>
		<div class="flex items-center">
			<div class="mr-3" v-if="accountStore.isLogin" @click="searchGameStore.show()">
				<base-icon class="text-[24px] flex-shrink-0" name="search"></base-icon>
			</div>
			<app-account-info v-if="accountStore.isLogin" />
			<template v-else>
				<app-region-lang />
				<app-account-action />
			</template>
		</div>
	</div>
</template>

<script setup lang="ts">
import AppLogo from '@/components/app/app-logo/index.vue'
import AppWallet from '@/components/app/app-wallet/index.vue'
import AppAccountAction from '@/components/app/app-account-action/index.vue'
import AppAccountInfo from '@/components/app/app-account-info/index.vue'
import AppRegionLang from '@/components/app/app-region-lang/index.vue'
import { useAccountStore, useSearchGameStore } from '@/store'
import { BaseIcon } from '@/components/base'

const accountStore = useAccountStore()
const searchGameStore = useSearchGameStore()
</script>
